<template>
  <div>
      <h3>基础用法</h3>
      <p>基础的提示弹出框用法</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-popover >
              <template slot="content">
              <div>
                  这是提示的内容
              </div>
              </template>
              <g-button>点击</g-button>
          </g-popover>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(0)" ref="one">
          <g-icon class="icon-down" :icon="isShow[0] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>指定提示框的位置</h3>
      <p>根据传入位置的呈现相关位置的提示，有上，下，左，右四个方向位置。</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-popover position="left">
              <template slot="content">
              <div>
                  我是提示信息，我在左边
              </div>
              </template>
              <g-button>左边点击</g-button>
          </g-popover>
              <g-popover position="top">
              <template slot="content">
              <div>
                我是提示信息，我在上边
              </div>
              </template>
              <g-button>上边点击</g-button>
          </g-popover><g-popover position="right">
              <template slot="content">
              <div>
               我是提示信息，我在右边
              </div>
              </template>
              <g-button>右边点击</g-button>
          </g-popover>
              <g-popover position="bottom">
              <template slot="content">
              <div>
               我是提示信息，我在下边
              </div>
              </template>
              <g-button>下边点击</g-button>
          </g-popover>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <pre><code class="vue">{{codeStr1}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(1)" ref="two">
          <g-icon class="icon-down" :icon="isShow[1] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[1] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>指定触发提示框的方式</h3>
      <p>触发提示框的方式有两种，一个是hover，二是click。</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-popover trigger="click">
              <template slot="content">
              <div>
                  这是鼠标点击提示的内容
              </div>
              </template>
              <g-button>点击</g-button>
          </g-popover>
          <g-popover trigger="hover">
              <template slot="content">
              <div>
                  这是鼠标悬浮时提示的内容
              </div>
              </template>
              <g-button>悬浮</g-button>
          </g-popover>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr2}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(2)" ref="one">
          <g-icon class="icon-down" :icon="isShow[2] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[2] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>attributes</h3>
      <p>组件参数说明</p>
    </div>
  </div>
</template>
 
<script lang="ts">
import Vue from "vue";
import gButton from "../../../src/Button.vue";
import gPopover from "../../../src/Popover.vue";
import gIcon from "../../../src/Icon.vue";
import mixin from "../mixin";

export default {
  name: "gButton",
  mixins: [mixin],
  data() {
    return {
      codeStr: `<g-popover >
              <template slot="content">
              <div>
                  这是提示的内容
              </div>
              </template>
              <g-button>点击</g-button>
          </g-popover>`.replace(/^\s*/gm, "")
        .trim(),
      codeStr1: `<g-popover position="left">
              <template slot="content">
              <div>
                  我是提示信息，我在左边
              </div>
              </template>
              <g-button>左边点击</g-button>
          </g-popover>
              <g-popover position="top">
              <template slot="content">
              <div>
                我是提示信息，我在上边
              </div>
              </template>
              <g-button>上边点击</g-button>
          </g-popover><g-popover position="right">
              <template slot="content">
              <div>
               我是提示信息，我在右边
              </div>
              </template>
              <g-button>右边点击</g-button>
          </g-popover>
              <g-popover position="bottom">
              <template slot="content">
              <div>
               我是提示信息，我在下边
              </div>
              </template>
              <g-button>下边点击</g-button>
          </g-popover>`.replace(/^\s*/gm, "")
        .trim(),
        codeStr2:`<g-popover trigger="click">
              <template slot="content">
              <div>
                  这是鼠标点击提示的内容
              </div>
              </template>
              <g-button>点击</g-button>
          </g-popover>
          <g-popover trigger="hover">
              <template slot="content">
              <div>
                  这是鼠标悬浮时提示的内容
              </div>
              </template>
              <g-button>悬浮</g-button>
          </g-popover>`.replace(/^\s*/gm,'').trim()
     
        
    };
  },
  components: {
    "g-button": gButton,
    'g-popover':gPopover,
    "g-icon": gIcon,
  },
};
</script>
<style  scoped>
 button{
   margin-right:20px;
 }
</style>